import GlobalPages from '../GlobalPages'
import GlobalHeader from './GlobalHeader'
import SiderMenu from '@/common/components/menu/SiderMenu'
import GlobalFooter from '../GlobalFooter'
export default {
  name: 'GlobalSlideMenu',
  data () {
    return {
      collapsed: false
    }
  },
  computed: {
    menuData () {
      return this.$store.getters.roles || []
    },
    contentStyle () {
      return {
        paddingTop: '64px'
      }
    },
    getLayoutStyle () {
      return {
        paddingLeft: this.collapsed ? '80px' : '200px'
      }
    },
    getFooterStyle () {
      return {
        width: this.collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)'
      }
    }
  },
  mounted () {
  },
  methods: {
    toggleCollapse () {
      this.collapsed = !this.collapsed
    }
  },
  render () {
    // 头部区域
    const { toggleCollapse } = this
    // 菜单
    const { menuData, collapsed } = this
    // 内容样式
    const { contentStyle, getLayoutStyle, getFooterStyle } = this
    return (
      <GlobalPages>

        {/* 菜单 */}
        <div slot="menu" class="fixed-menu">
          <SiderMenu menuData={menuData} collapsed={collapsed} collapsible={true} />
        </div>
        {/* 右侧内容区域 */}
        <div slot="GlobalRight" style={getLayoutStyle}>
          {/* 头部区域 */}
          <div class="Global-header" >
            <GlobalHeader onToggleCollapse={toggleCollapse} collapsed={collapsed} />
          </div>
          {/* 内容 */}
          <div class="Global-content" style={contentStyle}>
            <router-view />
          </div>
        </div>
        {/* 底部菜单 */}
        <div slot="footer">
          <GlobalFooter style={getFooterStyle} />
        </div>
      </GlobalPages>
    )
  }
}
